<template>
  <el-container class="login_content">
    <el-aside width="45%" class="login_aside">
      <div class="login_logo">
        <img src="@/assets/icon/scnx_logo.png" alt="" />
        <span>全网收单后台管理系统</span>
      </div>
      <div class="login_bg">
        <img src="@/assets/images/login_icon.png" class="login_icon" alt="" />
      </div>
    </el-aside>
    <el-container>
      <el-main class="login_main">
        <div class="login_box">
          <div class="right_title">欢迎登录</div>
          <div class="right_name">全网收单后台管理系统</div>
          <el-form label-position="top" label-width="80px" :model="user">
            <el-form-item label="登录账号">
              <el-input ref="inputUser" v-model="user.userId" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号密码">
              <el-input v-model="user.password" autocomplete="new-password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <div @click="toLogin" ref="login-btn" class="login_btn"
                :class="['login_btn', buttonDis ? 'disable_login_btn ' : '']">
                登 &nbsp;&nbsp;&nbsp;录
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <el-footer class="login_footer">
        版权所有 © 2023 四川省农村信用社联合社版权所有 蜀ICP备05031508号
      </el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, inject, onMounted, onUnmounted, useTemplateRef } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
// 全局方法
const $request: any = inject('$request')
const $common: any = inject('$common')
const $utils: any = inject('$utils')
const $MessageBox: any = inject('$MessageBox')
const inputUser = ref<HTMLInputElement | null>(null);
const loginBtn = useTemplateRef('login-btn')
const user = reactive({ userId: '016495', password: 'SC000000' });
const formRule = reactive({
  userName: [{ required: true, message: ' ', trigger: 'blur' }],
  newPassword: [{ required: true, message: ' ', trigger: 'blur' }],
  againPassword: [{ required: true, message: ' ', trigger: 'blur' }],
})
// 状态声明ref
const message = ref('')
const activeId = ref('MANAGER')
const buttonDis = ref(false);
// 计算属性声明
const doubleCount = computed(() => !buttonDis.value)
// 方法声明
const toLogin = () => {
  if (buttonDis.value) return
  if (user.userId && user.password) {
    // 密码规则校验
    // if (!$common.passwordPass.test(user.password)) {
    //   $MessageBox.alert(
    //     {
    //       txt: $common.passwordMsg,
    //       type: 'danger',
    //     }
    //   ).then(()=>{}).catch(()=>{})
    //   return
    // }
    buttonDis.value = true
    const action = {
      userIdentity: activeId.value,
      userId: user.userId,
      password: $utils.encryptPassworld(user.password),
    }
    $request
      .rpc({ name: 'pub.UserLogin', action })
      .then((result: any) => {
        if (result.sessionId) {
          sessionStorage.setItem("sessionId", result.sessionId);
        }
        if (result.token) {
          const arr = result.token.split("=");
          const key = arr[0];
          const value = arr[1];
          window.localStorage.setItem(key, value);
        }
        buttonDis.value = false;
        router.push({ path: '/main' })
      })
      .catch(() => {
        buttonDis.value = false
      })
  } else {
    $MessageBox.alert(
      {
        txt: '账号和密码不能为空',
        type: 'danger'
      },
    ).then(() => { }).catch(() => { })
  }
}
// 生命周期钩子
onMounted(() => {
  if (inputUser.value) {
    inputUser.value.focus();
  }
  message.value = 'Component Mounted!';
  console.log('Component has been mounted.');
});

onUnmounted(() => {
  console.log('Component will be unmounted.');
})
</script>
<style lang="scss" scoped>
@use '@/styles/login.scss';
</style>